<!--新页面模板-->
<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.roadId" clearable placeholder="选择路线" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" clearable placeholder="选择标段" @change="changeRoadSection">
        <el-option
          v-for="item in bidSectionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.slopeId" clearable placeholder="选择边坡">
        <el-option
          v-for="item in bidSlopeList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.investigateType" clearable placeholder="排查类型">
        <el-option
          v-for="item in EnumInvestigateTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.dangerLevel" clearable placeholder="隐患等级">
        <el-option
          v-for="item in EnumDangerLevelList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.checkStatus" clearable placeholder="核查状态">
        <el-option
          v-for="item in EnumCheckStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>

    <div class="page_main">
      <!-- table -->
      <el-table :data="tableList" border @expand-change="detailRow" :row-key='getRowKeys' :expand-row-keys="expands">
        <el-table-column type="expand" label="展开详情" width="70">
          <template slot-scope="props">
            <slope-detail :currentRow="props.row" :model="1" :isLook="true"></slope-detail>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="slopeName" show-overflow-tooltip min-width="120" label="边坡名称"></el-table-column>
        <el-table-column prop="roadName" show-overflow-tooltip min-width="120" label="路线名称"></el-table-column>
        <el-table-column prop="roadSectionName" show-overflow-tooltip min-width="120" label="标段名称"></el-table-column>
        <el-table-column prop="dangerLevelName" min-width="110" sortable label="隐患等级">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.dangerLevelName | gradeDangerColor" class="s-white">
              {{scope.row.dangerLevelName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="investigateTypeName" min-width="100" label="排查类型"></el-table-column>
        <el-table-column prop="unitName" show-overflow-tooltip min-width="120" label="排查单位"></el-table-column>
        <el-table-column prop="userName" show-overflow-tooltip min-width="80" label="排查人"></el-table-column>
        <el-table-column prop="investigateTime" width="180" sortable label="排查时间">
          <template slot-scope="scope">{{scope.row.investigateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="checkStatusName" min-width="100" label="状态">
          <template slot-scope="scope">
            <el-tag effect="plain" size="mini" v-if="scope.row.dangerLevel !== 0" :type="scope.row.checkStatusName | gradeCheckColor">
              {{ formatCheckStatus(scope.row.checkStatusName,scope.row.overStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="count" min-width="90" sortable label="次序"></el-table-column>
        <!--        <el-table-column prop="investigateTime" width="70" label="整改通知">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-badge :is-dot="scope.row.receiveType === 0" class="item"-->
        <!--                      v-if="scope.row.receiveType !== 2">-->
        <!--              <el-button class="share-button" @click="lookRectification(scope.row.id)"-->
        <!--                         type="primary">查看-->
        <!--              </el-button>-->
        <!--            </el-badge>-->
        <!--            <p v-else>无</p>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <button class="btn_edit" @click="downloadDoc(scope.row)">下载排查单</button>
            <!--            <button class="btn_edit" @click="handleEdit(scope.row)" v-if="isConstructionUnit">编辑</button>-->
            <!--            <button class="btn_edit" @click="handleRecord(scope.row)">操作记录</button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <el-dialog title="操作记录"
               :visible.sync="showRecord"
               :close-on-click-modal="false"
               @open="init"
               :close-on-press-escape="false" width="200px">
      <investigate-operation ref="operation" :id="this.investigateId"></investigate-operation>
    </el-dialog>
    <el-dialog title="查看整改通知单"
               :visible.sync="showRectificationList"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="200px">
      <el-card shadow="always" class="rectification-list" v-for="item in rectificationNoticeList" :key="item.id">
        <p><i class="el-icon-s-help"
              style="margin-right: 10px"></i>整改截止时间：<span>{{item.rectificationTime|formatTimer2}}</span>
        </p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>整改建议：<span>{{item.advice}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查单位：<span>{{item.checkUnitName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查人：<span>{{item.checkUserName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>签收状态：<span>{{item.receiveTypeName}}</span></p>
        <div class="qianshou" v-if="item.receiveTypeName === '未签收' && isConstructionUnit">
          <el-button class="common_btn-defalut" type="primary" size="mini"
                     @click="signForRectification(item.id)">签收
          </el-button>
        </div>
      </el-card>
    </el-dialog>
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import InvestigateOperation from './modules/investigate-operation'
import PictureViewer from '@/components/picture-viewer/index-name'
import ItemMixins from "./modules/item.mixins";
import {
  getSlopeInvestigationList,
  getRectificationNoticeByInvestigateId,
  receiveRectificationNotice,
  downloadSlopePaiChaDoc
} from '@/services/model/investigation'

import constUrl from '@/services/env'
import SlopeDetail from "./modules/slope-paicha-detail";
import Enums from '@/utils/enums'


export default {
  components: {PictureViewer, InvestigateOperation, SlopeDetail},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      showRecord: false,
      investigateId: '',
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      constUrl,
      EnumDangerLevelList: [],
      tableList: [],
      form: {
        page: 1,
        pageSize: 10,
        roadSectionId: ''
      },
      jump: {
        slopeId: '',
        investigateType: ''
      },
      detailActiveName: '',
      EnumCheckStatusList: [],
      EnumInvestigateTypeList: [],
      showRectificationList: false,
      rectificationNoticeList: [],
    }
  },
  watch: {
    investigateType(val) {
      this.jump.investigateType = ''
      if (val) {
        this.jump.investigateType = val
      }
    },
    slopeId(val) {
      this.jump.slopeId = ''
      if (val) {
        this.jump.slopeId = val
      }
    }
  },
  computed: {
    // 施工单位才展示排查编辑按钮
    isConstructionUnit() {
      return this.$store.state.userInfo.unitType === 6
    },
    investigateType() {
      return this.$route.params.investigateType
    },
    slopeId() {
      return this.$route.params.slopeId
    },
  },
  methods: {
    async downloadDoc(row) {
      await downloadSlopePaiChaDoc({id: row.id})

    },
    //签收整改通知单
    async signForRectification(id) {
      await receiveRectificationNotice({id: id})
      this.showRectificationList = false
      this.queryList();
    },
    //获取整改通知单
    async lookRectification(id) {
      this.showRectificationList = true
      let {data} = await getRectificationNoticeByInvestigateId({id: id})
      this.rectificationNoticeList = data || []
    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.investigateId)
      })
    },
    //查看操作记录时间线
    handleRecord(row) {
      this.showRecord = true
      this.investigateId = row.id
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    // 表格展开时触发
    detailRow(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
      if (row.itemList) {
        this.detailActiveName = row.itemList[0] ? row.itemList[0].name : ''
      }
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      //排查状态为复核驳回时才能再次编辑
      if (row.checkStatusName !== '复核驳回') {
        this.$notify({
          type: 'warning',
          title: '提示',
          message: '当前状态不能进行编辑操作！'
        })
        return
      }
      this.$router.push({
        name: 'slope-add-edit',
        params: {currentRow: row, name: '复核'}
      })
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    async queryList() {
      let form = JSON.parse(JSON.stringify(this.form))
      if (this.jump.investigateType) {
        form.investigateType = this.jump.investigateType
      }
      if (this.jump.slopeId) {
        form.slopeId = this.jump.slopeId
      }
      let res = await getSlopeInvestigationList(form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
    changeRoadSection() {
      this.$set(this.form, 'slopeId', '');
      this.slopeList = []
      const {roadSectionId} = this.form
      this.getSelectSlopeList(roadSectionId)
    },
  },
  mounted() {
    this.jump.investigateType = this.$route.params.investigateType
    this.jump.slopeId = this.$route.params.slopeId
    // // 查询单位类型
    this.queryDictList(['EnumDangerLevel', 'EnumCheckStatus', 'EnumInvestigateType'],
      ['EnumDangerLevelList', 'EnumCheckStatusList', 'EnumInvestigateTypeList']);
    this.getRoadList();
  },
  activated() {
    this.queryList()
  },
}
</script>
<style lang="less" scoped>
  .rectification-list {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 10px;

    span {
      font-size: 15px;
      color: gray;
    }
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;

    .el-button {
      padding: 5px 5px;
      margin-right: 0px !important;
      margin-bottom: 10px;
      min-width: 25px;
      height: 25px;
    }
  }

  .s-white {
    color: #FFFFFF;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

  .page_main {
    /deep/ .el-table__expand-icon {
      font-size: 15px !important;
    }
  }

  .page_main {

    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }

  .qianshou {
    float: right;
    margin-right: 20px;
    margin-bottom: 5px;

    span {
      color: white !important;
    }

    .common_btn-defalut {
      padding: 5px 10px !important;
    }
  }
</style>
